<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-alert title="注意:只允许为三级分类设置参数" type="warning" show-icon :closable="false"></el-alert>
      </el-row>
      <el-row style="margin-top:20px;">
        <label>请选择分类:</label>
             <el-cascader
                v-model="selectkeys"
                :options="typelist"
                :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id' }"
                @change="handleChange"
                size="small"
                ></el-cascader>
      </el-row>
      <el-row>
 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="dynamic">
         <el-table :data="manyData" border class="tabletop" style="width: 100%">
        <el-table-column type="expand"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
         <el-table-column label="参数名称" prop="attr_name"></el-table-column>
         <el-table-column label="操作">
          <template slot="header">
            <el-button type="primary" size="mini" @click="gosave()">添加</el-button>
          </template>
          <el-table-column fixed="right" label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="goeait(scope.row)"
              >编辑</el-button>
              <el-button 
              type="danger" 
              size="mini" 
              icon="el-icon-delete" 
              @click="del(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table-column>
         </el-table>

    </el-tab-pane>
    <el-tab-pane label="静态属性" name="satatic">
         <el-table :data="onlyData" border  style="width: 100%">
        <el-table-column type="expand"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
         <el-table-column label="参数名称" prop="attr_name"></el-table-column>
         <el-table-column label="操作">
          <template slot="header">
            <el-button type="primary" size="mini" @click="gosave()">添加</el-button>
          </template>
          <el-table-column fixed="right" label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="goeait(scope.row)"
              >编辑</el-button>
              <el-button 
              type="danger" 
              size="mini" 
              icon="el-icon-delete" 
              @click="del(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table-column>
         </el-table>
    </el-tab-pane>
  </el-tabs>

      </el-row>
    </el-card>

<el-dialog :title="dialogTitle" :visible.sync="isShow" @close="clearsaveobj()" :close-on-click-modal="false">
  <el-form :model="saveobj" :rules="checkobj" ref="saveform" >
    <el-form-item label="参数名称"  prop="attr_name">
      <el-input v-model="saveobj.attr_name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="save()">确 定</el-button>
  </div>
</el-dialog>


  </div>
</template>

<script>
export default {
    name:"type_parmas",
    data(){
        return{
            isShow:false,
            dialogTitle:"添加参数",
            saveobj:{
                attrId:0,//定义属性id
                attr_name:"",//参数名称
                id:0 ,//分类id
                attr_sel:"" //初始化参数类型的值为true
            },
            // 定义表单验证规则
             checkobj: {
                attr_name: [
                    { required: true, message: '请输入分类参数', trigger: 'blur' }
                ]
            },
            manyData:[],//定义动态参数列表数据数据源
            onlyData:[],//定义静态参数列表数据的数据源
            //该值与tab中的tab-pane的name属性值对应,用于控制显示哪个tab项
            activeName:"dynamic", 
            typelist:[], //级联输入框的数据源
            selectkeys:[] //与级联输入框实现数据双向绑定
        }
    },
    methods:{
        //点击删除触发的方法
        del(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
         console.log(row);
              let rst= await this.$http.delete(`categories/${row.cat_id}/attributes/${row.attr_id}`);
             if(rst.meta.status==200){
                 this.$message.success("删除成功");
                   this.getparams(); //刷新参数列表
             }else{
                 this.$message.error("删除失败");
             }
        }).catch(() => {
          this.$message.info("已取消删除")        
        });
              
        },
        //关闭弹窗时触发的方法,在该方法中重置saveobj的值
        clearsaveobj(){
                this.saveobj={
                attrId:0,//定义属性id
                attr_name:"",//参数名称
                id:0 ,//分类id
                attr_sel:"" //初始化参数类型的值为true
            }
        },
        gosave(){
            //判断用户是否选择了分类
            if(this.selectkeys.length==0){
                this.$message.warning("请先选择分类");
                return;
            }
            // 修改弹窗标题
            this.dialogTitle="添加分类参数";
            // 打开弹窗
            this.isShow=true;
            // 从selectkeys中获取分类id,最后一个数组元素就是三级分类的id
            this.saveobj.id=this.selectkeys[this.selectkeys.length-1];
        },
        // 点击编辑按钮时触发的方法
        goeait(row){
             // 修改弹窗标题
            this.dialogTitle="编辑分类参数";
            //为参数所属类型id赋值
            this.saveobj.id=row.cat_id;
            //为参数id赋值
            this.saveobj.attrId=row.attr_id;
            // 为参数名称赋值
            this.saveobj.attr_name=row.attr_name;
            this.isShow=true;
        },
      // 保存参数的方法
      save(){
            this.$refs.saveform.validate(  async (valid) => {
            if (valid) {
                let rst=null;
                //使用三元表达式定义属性类型的值
                this.saveobj.attr_sel=this.activeName=='dynamic'?'many':'only';
                if(this.saveobj.attrId==0){
                    // 添加
                rst= await this.$http.post(`categories/${this.saveobj.id}/attributes`,this.saveobj);
                }else{
                    //修改
                rst =await this.$http.put(`categories/${this.saveobj.id}/attributes/${this.saveobj.attrId}`,this.saveobj);
                }
                  if(rst.meta.status==201 || rst.meta.status==200){
                        this.getparams(); //刷新参数列表
                        this.isShow=false;//关闭弹窗
                    }else{
                        this.$message.error("保存失败");
                    }
          }
        }); 
        },
            // 当点击tab切换时触发的方法
            handleClick(){
                // 调用查询参数列表的方法
               this.getparams();
            },
            // 查询参数列表
        async getparams(){
                    //判断activeName的值是否为dynamic如果是则sel的值为many否则sel的值为noly
                    let sel=this.activeName=='dynamic'?'many':'only';
                    //获取所选分类的最后一级的id,由于级联选择器获取的值为一个数组,数组最后一个元素为第三分类的id值,所以需要获取最后一个数组元素的值
                    let id=  this.selectkeys[this.selectkeys.length-1];
                    //发送请求到服务器
                   let rst= await this.$http.get(`categories/${id}/attributes`,{sel});
                  if(rst.meta.status==200){
                      if(this.activeName=='dynamic'){
                        //如果是动态数据则将结果赋值给动态数据的数据源
                          this.manyData=rst.data;
                      }else{
                        //   如果是静态面板则将结果赋值给静态数据的数据源
                          this.onlyData=rst.data;
                      }
                  }else{
                      this.$message.error("获取参数列表失败");
                  }
                  console.log(rst.data)
        },
        // 当三级分类的选中值发生变化时触发的方法,在该方法中控制只允许用户选择第三级分类
        handleChange(){
            // 判断selectkeys的数组长度是否为3如果不是3则不能被选中,并给出相应的提示
            if(this.selectkeys.length!=3){
                this.selectkeys=[]; //清空选中的分类信息
                return; //结束函数
            }
              // 调用查询参数列表的方法
              this.getparams();
        },
        // 查询三级分类列表
           async querytype(){
            let rst= await this.$http.get("categories",{type:3});
            if(rst.meta.status==200){
                //将获取到的数据赋值给级联选择器的数据源
                this.typelist=rst.data;
            }else{
                this.$message.error("商品分类列表获取失败")
            }
            }
    },
    mounted(){
            this.querytype();
    }
};
</script>

<style>
</style>